@extends('Admin.layouts.application')
@section('content')
    <div class="admin-content">
        <div class="admin-content-body">
            <div class="am-cf am-padding">
                <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">管理首页</strong> /
                    <small>Manage Home</small>
                </div>
            </div>

            @include('Admin.layouts._flash')


            <ul class="am-avg-sm-1 am-avg-md-4 am-margin am-padding am-text-center admin-content-list ">
                <li>
                    <a href="/hotelreferral" class="am-text-warning">
                        <span class="am-icon-btn am-icon-list-alt"></span><br/>菜单列表<br/>
                    </a>
                </li>

                <li>
                    <a href="/video" class="am-text-success">
                        <span class="am-icon-btn am-icon-indent"></span><br/>视频列表<br/>
                    </a>
                </li>

                <li>
                    <a href="/video/create" class="am-text-danger">
                        <span class="am-icon-btn am-icon-plus-square"></span><br/>添加新视频<br/>
                    </a>
                </li>

                <li>
                    <a href="/clear_cache" class="am-text-secondary">
                        <span class="am-icon-btn am-icon-refresh am-icon-spin"></span><br/>清除缓存
                    </a>
                </li>
            </ul>


            <hr data-am-widget="divider" style="" class="am-divider am-divider-default am-no-layout">
       {{--     <div class="am-g">
                <div class="am-u-sm-12">
                    <div id="sales_count" style="width: 100%;height:400px;"></div>
                </div>
            </div>--}}
            {{--<hr data-am-widget="divider" style="" class="am-divider am-divider-default am-no-layout">--}}
            <div class="am-g">
                <div class="am-u-md-6">
                    <div class="am-panel am-panel-default">
                        <div class="am-panel-hd am-cf" data-am-collapse="{target: '#collapse-panel-1'}">系统信息<span
                                    class="am-icon-chevron-down am-fr"></span></div>
                        <div class="am-panel-bd am-collapse am-in" id="collapse-panel-1">
                            <ul class="am-list admin-content-file">
                                <li>
                                    <strong><span class="am-icon-upload"></span> 硬盘使用率</strong>

                                    <div class="am-progress am-progress-striped am-progress-sm am-active">

                                        <div class="am-progress-bar am-progress-bar-success"
                                             style="width: {{$already_used_percent}}%">{{$already_used_percent}}%
                                        </div>
                                    </div>
                                </li>
                                <li>
                                    <strong><span class="am-icon-check"></span>硬盘大小</strong>
                                    <p>{{$total_space}}G</p>
                                </li>
                                <li>
                                    <strong><span class="am-icon-check"></span>硬盘剩余</strong>
                                    <p>{{$free_space}}G</p>
                                </li>
                                <li>
                                    <strong><span class="am-icon-check"></span>系统</strong>
                                    <p>{{$os}}</p>
                                </li>
                                <li>
                                    <strong><span class="am-icon-check"></span>服务器版本</strong>
                                    <p>{{$server_software}}</p>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
                {{--<div class="am-u-md-6">
                    <div class="am-panel am-panel-default">
                        <div class="am-panel-hd am-cf" data-am-collapse="{target: '#collapse-panel-2'}">浏览器统计<span class="am-icon-chevron-down am-fr"></span></div>
                        <div id="collapse-panel-2" class="am-in">
                            <table class="am-table am-table-bd am-table-bdrs am-table-striped am-table-hover">
                                <tbody>
                                <tr>
                                    <th class="am-text-center">#</th>
                                    <th>浏览器</th>
                                    <th>访问量</th>
                                </tr>
                                <tr>
                                    <td class="am-text-center"><img src="/assets/amazeui/i/examples/admin-chrome.png" alt=""></td>
                                    <td>Google Chrome</td>
                                    <td>3,005</td>
                                </tr>
                                <tr>
                                    <td class="am-text-center"><img src="/assets/amazeui/i/examples/admin-firefox.png" alt=""></td>
                                    <td>Mozilla Firefox</td>
                                    <td>2,505</td>
                                </tr>
                                <tr>
                                    <td class="am-text-center"><img src="/assets/amazeui/i/examples/admin-ie.png" alt=""></td>
                                    <td>Internet Explorer</td>
                                    <td>1,405</td>
                                </tr>
                                <tr>
                                    <td class="am-text-center"><img src="/assets/amazeui/i/examples/admin-opera.png" alt=""></td>
                                    <td>Opera</td>
                                    <td>4,005</td>
                                </tr>
                                <tr>
                                    <td class="am-text-center"><img src="/assets/amazeui/i/examples/admin-safari.png" alt=""></td>
                                    <td>Safari</td>
                                    <td>505</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                </div>--}}
            </div>
        </div>

        @include('Admin.layouts._footer')

    </div>

@endsection
@section('js')
    <script src="/assets/xSystem/vendor/echarts/echarts.min.js"></script>
    <script src="/assets/xSystem/vendor/echarts/china.js"></script>
    <script src="/assets/xSystem/vendor/echarts/macarons.js"></script>
    {{--<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('sales_count'));

        // 指定图表的配置项和数据

        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎', '百度', '谷歌', '必应', '其他']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '直接访问',
                    type: 'bar',
                    data: [320, 332, 301, 334, 390, 330, 320]
                },
                {
                    name: '邮件营销',
                    type: 'bar',
                    stack: '广告',
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '联盟广告',
                    type: 'bar',
                    stack: '广告',
                    data: [220, 182, 191, 234, 290, 330, 310]
                },
                {
                    name: '视频广告',
                    type: 'bar',
                    stack: '广告',
                    data: [150, 232, 201, 154, 190, 330, 410]
                },
                {
                    name: '搜索引擎',
                    type: 'bar',
                    data: [862, 1018, 964, 1026, 1679, 1600, 1570],
                    markLine: {
                        lineStyle: {
                            normal: {
                                type: 'dashed'
                            }
                        },
                        data: [
                            [{type: 'min'}, {type: 'max'}]
                        ]
                    }
                },
                {
                    name: '百度',
                    type: 'bar',
                    barWidth: 5,
                    stack: '搜索引擎',
                    data: [620, 732, 701, 734, 1090, 1130, 1120]
                },
                {
                    name: '谷歌',
                    type: 'bar',
                    stack: '搜索引擎',
                    data: [120, 132, 101, 134, 290, 230, 220]
                },
                {
                    name: '必应',
                    type: 'bar',
                    stack: '搜索引擎',
                    data: [60, 72, 71, 74, 190, 130, 110]
                },
                {
                    name: '其他',
                    type: 'bar',
                    stack: '搜索引擎',
                    data: [62, 82, 91, 84, 109, 110, 120]
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>--}}
    <script src="/assets/xSystem/js/visualization/sales_count.js"></script>


@endsection